/**
 * 核心思想：只要涉及页面要用的变量属性、事件方法，都导出去，然后在页面中直接导入使用即可。
 * 1. 可以直接使用 ‘vue’, 导入任何所需的方法.
 * 2. 页面中点击事件以及处理逻辑，在这里定义好，然后导出去。对应的页面直接导入使用即可。
 * 3. 监听的动作全部都在这里做，不用在页面里，效果是一样的。
 * **/
import { ref, reactive, watch, watchEffect } from 'vue'
// 监听属性
const x = ref(0)
const y = ref(0)
const z = reactive({ name: 'jick' })
const todoId = ref(1)
const todoCid = ref(10)
function wtClick1() {
    x.value++
}
function wtClick3() {
    y.value = 10
}

function wtClick4() {
    z.name = 'tokm'
}
function wtClick5() {
    todoId.value++
}
watch(x, (newx) => {
    console.log('newx==>', newx);
})
watch(
    () => x.value + y.value,
    (sum) => { console.log('sum===>', sum); }
)
watch(
    [x, () => y.value],
    ([newx2, newy2]) => { console.log('newx1===>', newx2, 'newy2==>', newy2); }
)
watch(
    () => z.name,
    (name) => {
        console.log('name===>', name)
    }
)
watchEffect(
    () => {
        if (x.value > 0) {
            console.log('todoId.value==>', todoId.value);
            console.log('todoCid.value==>', todoCid.value);
            console.log('z.name5555==>', z.name);
        }
    }
)
export { wtClick1, wtClick3, wtClick4, wtClick5, x, y, z }